import React, { useState, useEffect, useMemo } from 'react';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';
import { ScrollBoard } from '@jiaminghi/data-view-react';
import moment from 'moment';
let statusname = {
  stalled: '待处理',
  pending: '处理中',
  completed: '已完成',
};

const Figdata = ({ handleSubmit, settotal, tab }) => {
  const { data, loading } = useRequest(
    () => {
      return getFetch({ url: '/vehicle-api/monitor/finger_print_list', params: {} });
    },
    {
      debounceWait: 300,
      pollingInterval: 60000,
    },
  );

  let config = useMemo(() => {
    settotal({ finger: data?.data?.total ?? 0 });
    return {
      header: ['报警类型', '用户名称', '报警位置', '报警时间', '状态', '操作'],
      headerBGC: 'rgba(30,79,140,0.5)',
      evenRowBGC: 'rgba(100,143,194,0.1)',
      oddRowBGC: 'rgba(255,255,255,0.1)',
      hoverPause: !(data?.data?.list && data?.data?.list.length < 7),
      rowNum: 6,
      data: data?.data?.list
        ? data?.data?.list.map((it) => [
          it?.alarm_group_name,
          it?.alarm_name,
          `<span className="oneline" title='${it?.alarm_address}'>${it?.alarm_address}</span>`,
          `<span className="oneline" title='${moment(it?.alarm_time).format(
            'YYYY-MM-DD HH:mm',
          )}'>${moment(it?.alarm_time).format('YYYY-MM-DD HH:mm')}</span>`,
          statusname[it.status],
          `
            <div>
              <a style='color:${it.status != 'stalled' ? '#999' : '#0fbebc'}'>处理</a>
            </div>
          `,
        ])
        : [],
    };
  }, [data?.data?.total]);

  return (
    <ScrollBoard
      config={config}
      style={{ width: '100%', height: '100%', display: tab == 'tab2' ? 'block' : 'none' }}
      onClick={(row) => {
        let cur = data?.data?.list.filter((it, i) => row?.rowIndex == i)[0];
        if (row.columnIndex == 5 && row.row[4] == '待处理') {
          handleSubmit(cur?.id);
        } else {
          
        }
      }}
    />
  );
};

export default Figdata;
